<template>
  <div>
    <el-dialog title="地址详情" :visible.sync="dialogVisible" width="65%">
      <el-form ref="forms" :model="form" class="demo-form-inline" size="mini" :rules="rules">
        <el-form-item label="发货地址" label-width="150px" prop="addressName">
          <el-input v-model="form.addressName " placeholder="发货地址" style="width:300px" />
        </el-form-item>
        <el-form-item label="发货姓名" label-width="150px">
          <el-input v-model="form.name " placeholder="发货姓名" style="width:300px" />
        </el-form-item>
        <el-form-item label="发货人手机号" label-width="150px">
          <el-input v-model="form.phone " placeholder="发货人手机号" style="width:300px" />
        </el-form-item>
        <el-form-item label="邮政编码" label-width="150px">
          <el-input v-model="form.postCode " placeholder="邮政编码" style="width:300px" />
        </el-form-item>
        <el-form-item label="收货地址" label-width="150px">
          <el-cascader
            v-model="form.cityCode"
            size="large"
            :options="options"
          />
        </el-form-item>
        <el-form-item label="详细地址" label-width="150px">
          <el-input v-model="form.detailAddress" placeholder="详细地址" style="width:300px" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否默认收货地址" label-width="150px">
              <el-switch v-model="form.receiveStatus " :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否默认发货地址" label-width="150px">
              <el-switch v-model="form.sendStatus " :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { save, editAddress, update } from '@/api/order/address'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      id: '',
      dialogVisible: false,
      options: regionData,
      rules: {
        addressName: [
          { required: true, message: '请输入发货地址', trigger: 'blur' }
        ]
      },
      form: {
        addressName: '',
        name: '',
        phone: '',
        postCode: '',
        detailAddress: '',
        receiveStatus: 1,
        sendStatus: 1,
        cityCode: []
      }
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    open(id) {
      if (id) {
        this.id = id
        this.getDetail()
      }
      this.dialogVisible = true
    },
    getDetail() {
      editAddress(this.id).then(res => {
        if (res.success) {
          this.form = {
            ...res.data.address,
            cityCode: res.data.address.cityCode.split(',')
          }
        }
      })
    },
    add() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          if (this.id) {
            const obj = {
              ...this.form,
              cityCode: this.form.cityCode.join(','),
              province: CodeToText[this.form.cityCode[0]],
              city: CodeToText[this.form.cityCode[1]],
              region: CodeToText[this.form.cityCode[2]]
            }
            update(obj).then(res => {
              if (res.success) {
                this.$message.success('修改成功')
                this.dialogVisible = false
              } else {
                this.$message.error('修改失败')
              }
            })
          } else {
            const obj = {
              ...this.form,
              cityCode: this.form.cityCode.join(','),
              province: CodeToText[this.form.cityCode[0]],
              city: CodeToText[this.form.cityCode[1]],
              region: CodeToText[this.form.cityCode[2]]
            }
            save(obj).then(res => {
              if (res.success) {
                this.dialogVisible = false
                this.$message.success('新增成功')
              } else {
                this.$message.error('新增失败')
              }
            })
          }
        } else {
          return false
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>

</style>
